import { assert } from '@/lib/utils.ts';

import {
    tf,
    IDCol,
    HTMLTooltip,
    questionMarkHeaderComponentParams,
    getAuditStatusColorClass,
    auditStatusCircleHeaderTooltip,
    createAndInitilalizeTable,
} from '@/components/table/lib';

function project_audit_status_renender(params: any) {
    const v = params.value;
    return `
    <div class='tw:flex tw:items-center tw:h-full'>
    <span class='tw:size-4 tw:badge tw:badge-xs ${getAuditStatusColorClass(v.Project)}'>1</span>
    <span class='tw:size-4 tw:badge tw:badge-xs ${getAuditStatusColorClass(v.Plan)}'>2</span>
    <span class='tw:size-4 tw:badge tw:badge-xs ${getAuditStatusColorClass(v.InitiationData)}'>3</span>
    <span class='tw:size-4 tw:badge tw:badge-xs ${getAuditStatusColorClass(v.BeforeImplement)}'>4</span>
    <span class='tw:size-4 tw:badge tw:badge-xs ${getAuditStatusColorClass(v.Implement)}'>5</span>
    <span class='tw:size-4 tw:badge tw:badge-xs ${getAuditStatusColorClass(v.Finish)}'>6</span>
    </div>
`
}

export function initializeTable(url: string) {
    const table_elem = document.getElementById("table");
    assert(table_elem, "Element with ID 'table' not found");
        
    return createAndInitilalizeTable(
        url,
        table_elem,
        {
            columnDefs: [
                IDCol,
                {
                    ...tf("chinese_name", "项目中文名称"),
                    minWidth: 170,
                    flex: 1,
                },
                {
                    ...tf("english_name", "项目英文名称"),
                    width: 170,
                },
                {
                    ...tf("drug_name", "药物名称"),
                    width: 120,
                },
                {
                    ...tf("device_name", "器械名称"),
                    width: 120,
                },
                {
                    ...tf("creator", "项目创建者"),
                    width: 150,
                },
                {
                    ...tf("created_at", "创建时间"),
                    type: 'date',
                },
                {
                    field: "overall_audit_status",
                    headerName: gettext("整体审核进度"),
                    headerComponentParams: questionMarkHeaderComponentParams,
                    cellRenderer: project_audit_status_renender,
                    valueFormatter: p => {
                        const data = p.data.overall_audit_status;
                        return JSON.stringify(data);
                    },
                    tooltipComponent: HTMLTooltip,
                    filter: 'agNumberColumnFilter',
                    filterValueGetter: p => {
                        const data = p.data.overall_audit_progress;
                        // use max progress
                        return data[1];
                    },
                    headerTooltip: `
                    <ul>
                      <li>1: 项目信息</li>
                      <li>2: 项目方案</li>
                      <li>3: 项目立项资料</li>
                      <li>4: 项目启动前</li>
                      <li>5: 项目入组</li>
                      <li>6: 项目结束</li>
                   </ul>
                    ` + auditStatusCircleHeaderTooltip
                        + `<span>对条件过滤的时候填入数字，<br/>和通过审核的最大子项`
                        + `数字进<br />行比较</span>`,

                }
            ]
        }
    );
}
